import React from 'react';
import {
  Box,
  Card,
  CardContent,
  Typography,
  LinearProgress,
  Chip,
  Avatar,
  Grid,  // 恢复使用Grid
  Stack
} from '@mui/material';
import {
  Person as PersonIcon,
  MonetizationOn as MoneyIcon,
  TrendingUp as WinIcon,
  TrendingDown as LossIcon,
  Equalizer as StatsIcon
} from '@mui/icons-material';

interface PlayerStatsProps {
  playerId: string;
  playerName: string;
  avatar?: string;
  chips: number;
  wins: number;
  losses: number;
  winRate?: number;
  isActive?: boolean;
  isDealer?: boolean;
}

const PlayerStats: React.FC<PlayerStatsProps> = ({
  playerId,
  playerName,
  avatar,
  chips,
  wins,
  losses,
  winRate = 0,
  isActive = false,
  isDealer = false
}) => {
  const totalGames = wins + losses;
  const chipsPercentage = Math.min(chips / 10000 * 100, 100); // 假设10000是最大筹码

  const getStatusColor = () => {
    if (isDealer) return 'warning';
    if (isActive) return 'success';
    return 'default';
  };

  const getStatusText = () => {
    if (isDealer) return '庄家';
    if (isActive) return '游戏中';
    return '旁观';
  };

  return (
    <Card 
      sx={{ 
        mb: 2, 
        border: isActive ? 2 : 1, 
        borderColor: isActive ? 'success.main' : 'divider',
        boxShadow: isActive ? 3 : 1
      }}
    >
      <CardContent sx={{ pb: 2 }}>
        <Box display="flex" alignItems="center" gap={2}>
          <Box flex={0.2}>  {/* 使用Box替代Grid */}
            <Avatar 
              src={avatar} 
              alt={playerName}
              sx={{ 
                width: 48, 
                height: 48,
                border: isDealer ? 2 : 0,
                borderColor: 'warning.main'
              }}
            >
              <PersonIcon />
            </Avatar>
          </Box>
          
          <Box flex={0.8}>  {/* 使用Box替代Grid */}
            <Box display="flex" justifyContent="space-between" alignItems="center" mb={1}>
              <Typography variant="h6" component="div">
                {playerName}
              </Typography>
              <Chip 
                size="small" 
                color={getStatusColor()}
                label={getStatusText()}
              />
            </Box>
            
            <Typography variant="body2" color="text.secondary" gutterBottom>
              ID: {playerId}
            </Typography>
            
            <Box mb={2}>
              <Box display="flex" justifyContent="space-between" alignItems="center" mb={0.5}>
                <Box display="flex" alignItems="center">
                  <MoneyIcon fontSize="small" color="primary" sx={{ mr: 0.5 }} />
                  <Typography variant="body2" fontWeight="bold">
                    筹码: ${chips}
                  </Typography>
                </Box>
                <Typography variant="body2" color="text.secondary">
                  {chipsPercentage.toFixed(0)}%
                </Typography>
              </Box>
              <LinearProgress 
                variant="determinate" 
                value={chipsPercentage} 
                color="primary"
                sx={{ height: 6, borderRadius: 3 }}
              />
            </Box>
            
            <Stack direction="row" spacing={2} mb={1}>
              <Box display="flex" alignItems="center">
                <WinIcon fontSize="small" color="success" sx={{ mr: 0.5 }} />
                <Typography variant="body2">
                  胜: {wins}
                </Typography>
              </Box>
              
              <Box display="flex" alignItems="center">
                <LossIcon fontSize="small" color="error" sx={{ mr: 0.5 }} />
                <Typography variant="body2">
                  负: {losses}
                </Typography>
              </Box>
              
              <Box display="flex" alignItems="center">
                <StatsIcon fontSize="small" color="info" sx={{ mr: 0.5 }} />
                <Typography variant="body2">
                  胜率: {winRate.toFixed(1)}%
                </Typography>
              </Box>
            </Stack>
            
            <Typography variant="caption" color="text.secondary">
              总场次: {totalGames}
            </Typography>
          </Box>
        </Box>  {/* 修正为Box */}
      </CardContent>
    </Card>
  );
};

export default PlayerStats;